<template>
    <navigator :url="`/pages/news_detail/news_detail?id=${newsId}`">
        <view class="news-card flex bg-white px-[20rpx] py-[32rpx]">
            <view class="mr-[20rpx]" v-if="item.image">
                <u-image :src="getImageUrl(item.image)" border-radius="16" width="240" height="180"></u-image>
            </view>
            <view class="news-card-content flex flex-col justify-between flex-1">
                <view class="news-card-content-title text-base">{{ item.title }}</view>
                <view class="news-card-content-intro text-gray-400 text-sm mt-[16rpx]">
                    {{ item.summary }}
                </view>

                <view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
                    <view>发布时间：{{ item.create_time }}</view>

                </view>
            </view>
        </view>
    </navigator>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores/app'
const { getImageUrl } = useAppStore()
const props = withDefaults(
    defineProps<{
        item: any
        newsId: number
    }>(),
    {
        item: {},
        newsId: ''
    }
)
</script>

<style lang="scss" scoped>
.news-card {
    margin: 0 20rpx 20rpx 20rpx;
    border-radius: 16rpx;
    &-content {
        &-title {
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-size: 30rpx;
            padding-bottom: 10rpx;
        }
        &-intro {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}
</style>
